<template>
  <view>
    <u-navbar title="Alger聊天室" :border-bottom="false"></u-navbar>
    <view class="item" v-for="(item, index) in arr" :key="index">
      <template v-if="item.type == 2">
        <view class="wellcome">
          <text>{{ item.text }}</text>
        </view>
      </template>
      <template v-else>
        <view class="content" :class="{ right: item.type == 0 }">
          <image :src="item.img" mode="scaleToFill" />
          <view class="text">{{ item.text }}</view>
        </view>
        <view class="name" :class="{ namer: item.type == 0 }"
          >{{ item.name }} {{ $u.timeFormat(item.time, "hh:MM") }}</view
        >
      </template>
    </view>
    <view class="bottom">
      <view class="input">
        <textarea v-model="text" type="text" auto-height />
        <button @click="send()">发送</button></view
      >
    </view>
    <view class="box"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      img: "",
      text: "",
      arr: [],
    }
  },
  onLoad(options) {
    this.name = options.name
    this.img = options.img
    this.getMsg()
    this.join()
  },
  methods: {
    send() {
      if (this.text.length == 0) {
        return
      }
      let data = {
        name: this.name,
        img: this.img,
        text: this.text,
        time: Date.now(),
      }

      this.socket.emit("message", JSON.stringify(data))
      this.arr.push({ ...data, type: 0 })
      this.text = ""
      this.toBottom()
    },
    getMsg() {
      this.socket.on("sendMsg", (data) => {
        let obj = JSON.parse(data)
        obj.type = 1
        this.arr.push(obj)
        this.toBottom()
      })
      this.socket.on("welcome", (name) => {
        this.arr.push({
          name: "",
          img: "",
          text: `欢迎 ${name ? name : "陌生人"} 加入聊天室`,
          time: Date.now(),
          type: 2,
        })
        this.toBottom()
      })

      this.socket.on("quit", (name) => {
        this.arr.push({
          name: "",
          img: "",
          text: `${name} 离开了聊天室`,
          time: Date.now(),
          type: 2,
        })
        this.toBottom()
      })
    },
    toBottom() {
      setTimeout(() => {
        uni.pageScrollTo({ scrollTop: 99999999999999999999999 })
      }, 100)
    },
    join() {
      this.socket.emit("join", this.name, this.img)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  padding: 40rpx;
}
.item {
  margin-bottom: 40rpx;

  .wellcome {
    text-align: center;
    text {
      margin: 0 auto;
      background-color: #727a99;
      color: white;
      padding: 10rpx 20rpx;
      font-size: 20rpx;
      border-radius: 40rpx;
      opacity: 0.5;
    }
  }
  .content {
    display: flex;
    align-items: flex-end;
    font-size: 30rpx;
  }
  .right {
    flex-direction: row-reverse;
    .name {
      text-align: right;
    }
    .text {
      border-radius: 25rpx 25rpx 0 25rpx;
      background: #727a99;
      color: #fff;
    }
  }
  image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 20rpx;
  }
  .text {
    margin: 0 20rpx;
    background-color: #eee;
    max-width: 500rpx;
    padding: 20rpx;
    border-radius: 25rpx 25rpx 25rpx 0;
    // 换行
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .name {
    font-size: 26rpx;
    margin: 0 90rpx;
    color: #999;
  }
  .namer {
    text-align: right;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 30rpx;
  background-color: #fff;

  width: 100%;
  .input {
    background-color: #eee;
    display: flex;
    align-items: flex-end;
    border-radius: 10rpx;
    overflow: hidden;
  }
  textarea {
    flex: 1;
    background-color: #eee;
    height: 100%;
    font-size: 30rpx;
    padding: 20rpx;
  }
}

.box {
  height: 400rpx;
}
</style>
